<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			p {
				text-indent: 22px;
			}
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
			<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>
			<h1 class="mui-title">off canvas（侧滑导航）</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<p>这是webview模式右滑导航示例，主页面和菜单在不同的webview中，
					优点是支持菜单内容在多页面的复用，缺点是不支持拖动手势（跟手）；
					当前页面为主界面，你可以在主界面放置任何内容；
					 打开侧滑菜单有多种方式：
					 1、在当前页面快速向右滑动（swipe）； 
					 2、点击页面左上角的
					<span class="mui-icon mui-icon-bars"></span> 图标；
					 3、通过JS API触发（例如点击如下蓝色按钮体验）；
					 <span class="android-only">4、Android手机按menu键；</span>
				</p>
				<p style="padding: 5px 20px;margin-bottom: 5px;">
					<button id="show-btn" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 10px;">
						显示侧滑菜单
					</button>
				</p>
				<p >侧滑菜单的移动动画，支持多种效果，切换如下选项体验不同动画效果：</p>

			</div>
			<form class="mui-input-group" style="margin-bottom: 15px;">
				<div class="mui-input-row mui-radio">
					<label>主界面移动、菜单不动</label>
					<input name="style" type="radio" checked="" value="main-move">
				</div>
				<div class="mui-input-row mui-radio">
					<label>主界面不动、菜单移动</label>
					<input name="style" type="radio" value="menu-move">
				</div>
				<div class="mui-input-row mui-radio mui-hidden" id="move-togger">
					<label>整体移动</label>
					<input name="style" type="radio" value="all-move">
				</div>
			</form>
		</div>
	</body>
<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script>
			var main,menu, mask = mui.createMask(closeMenu);
			var showMenu = false,mode = 'main-move';
			 
			if (!mui.os.android) {
				//整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；
				document.getElementById("move-togger").classList.remove('mui-hidden');
				var spans = document.querySelectorAll('.android-only');
				for (var i=0,len=spans.length;i<len;i++) {
					spans[i].style.display = "none";
				}
			}

			mui.init({
				swipeBack: false,
				beforeback: back
			});

			function back() {
				if (showMenu) {
					//菜单处于显示状态，返回键应该先关闭菜单,阻止主窗口执行mui.back逻辑；
					closeMenu();
					return false;
				} else {
					//菜单处于隐藏状态，执行返回时，要先close菜单页面，然后继续执行mui.back逻辑关闭主窗口；
					menu.close('none');
					return true;
				}
			}
				//plusReady事件后，自动创建menu窗口；
			mui.plusReady(function() {
				main = plus.webview.currentWebview();
				//侧滑菜单默认隐藏，这样可以节省内存；
				menu = mui.preload({
					id: 'offcanvas-drag-right-plus-menu',
					url: 'offcanvas-drag-right-plus-menu.html',
					styles: {
						left: 0,
						width: '70%',
						zindex: 9997
					}
				});
			});
			/**
			 * 显示菜单菜单
			 */
			function openMenu() {
				if (!showMenu) {
					//侧滑菜单处于隐藏状态，则立即显示出来；
					//显示完毕后，根据不同动画效果移动窗体；
					menu.show('none', 0, function() {
						switch (mode){
							case 'main-move':
								//主窗体开始侧滑；
								main.setStyle({
									left: '70%',
									transition: {
										duration: 150
									}
								});
								break;
							case 'menu-move':
								menu.setStyle({
									left: '0%',
									transition: {
										duration: 150
									}
								});
								break;
							case 'all-move':
								main.setStyle({
									left: '70%',
									transition: {
										duration: 150
									}
								});
								menu.setStyle({
									left: '0%',
									transition: {
										duration: 150
									}
								});
								break;
						}
					});
					//显示遮罩
					mask.show();
					showMenu = true;
				}
			}
			/**
			 * 关闭侧滑菜单
			 */
			function closeMenu() {
				if (showMenu) {
					//关闭遮罩；
					mask.close();
					switch (mode){
						case 'main-move':
							//主窗体开始侧滑；
							main.setStyle({
								left: '0',
								transition: {
									duration: 150
								}
							});
							break;
						case 'menu-move':
							//主窗体开始侧滑；
							menu.setStyle({
								left: '-70%',
								transition: {
									duration: 150
								}
							});
							break;
						case 'all-move':
							//主窗体开始侧滑；
							main.setStyle({
								left: '0',
								transition: {
									duration: 150
								}
							});
							//menu页面同时移动
							menu.setStyle({
								left: '-70%',
								transition: {
									duration: 150
								}
							});
							
							break;
					}
					
					//等窗体动画结束后，隐藏菜单webview，节省资源；
					setTimeout(function() {
						menu.hide();
					}, 200);
					//改变标志位
					showMenu = false;
				}
			}
			
			//变换侧滑动画移动效果；
			mui('.mui-input-group').on('change', 'input', function() {
				if (this.checked) {
					switch (this.value) {
						case 'main-move':
							//仅主窗口移动的时候，menu页面的zindex值要低一点；
							menu.setStyle({left:'0',zindex:9997});
							if(mode=='all-move'){
								menu.setStyle({
									left: '0%'
								});
							}
							mode = 'main-move';
							break;
						case 'menu-move':
							menu.setStyle({left:'-70%',zindex:9999});
							if(mode=='all-move'){
								menu.setStyle({
									left: '0%'
								});
							}
							mode = 'menu-move';
							break;
						case 'all-move':
							//切换为整体移动
							//首先改变移动标志
							slideTogether = true;
							//变换menu界面初始化位置，整体移动时，Menu界面left需要在-70%的地方；
							menu.setStyle({
								left: '-70%'
							});
							mode = 'all-move';
							break;
					}
				}
			});

			 //点击左上角图标，打开侧滑菜单；
			document.querySelector('.mui-icon-bars').addEventListener('tap', openMenu);
			document.getElementById("show-btn").addEventListener('tap',openMenu);
			 //在android4.4中的swipe事件，需要preventDefault一下，否则触发不正常
			 //故，在dragleft，dragright中preventDefault
			window.addEventListener('dragright', function(e) {
				e.detail.gesture.preventDefault();
			});
			window.addEventListener('dragleft', function(e) {
				e.detail.gesture.preventDefault();
			});
			 //主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作；
			window.addEventListener("swiperight", openMenu);
			 //主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
			window.addEventListener("swipeleft", closeMenu);
			 //menu页面向左滑动，关闭菜单；
			window.addEventListener("menu:swipeleft", closeMenu);

			//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
			mui.menu = function() {
				if (showMenu) {
					closeMenu();
				} else {
					openMenu();
				}
			}
		</script>
</html>